<template>
<div>
  <el-form  :model="dataForm" label-position="left"   style="margin: 0 auto;width:90%" label-width="110px">
    <el-col :span="11">
    <el-form-item label="表名" prop="name">
      <el-input v-model="dataForm.tableName" style="width: 300px;font-weight: bold; "  v-bind:disabled="true"></el-input>
    </el-form-item>
    </el-col>
    <el-col :span="11">
    <el-form-item label="库名">
      <el-input    v-model="dataForm.schemaName" style="width: 300px" :disabled="true"></el-input>
    </el-form-item>
    </el-col>
    <el-col :span="11">
    <el-form-item label="字段名json">
      <el-input v-model="dataForm.colNameJson" type="textarea" :rows="5" style="width: 300px" :disabled="true" ></el-input>
    </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="上游表名json">
        <el-input v-model="dataForm.sourceTableJson" type="textarea" :rows="5" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
    <el-form-item label="分区字段名">
      <el-input v-model="dataForm.partitionColNameJson" style="width: 300px" :disabled="true" ></el-input>
    </el-form-item>
    </el-col>

    <el-col :span="11">
      <el-form-item label="hdfs所属人">
        <el-input v-model="dataForm.tableFsOwner" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="参数信息">
        <el-input v-model="dataForm.tableParametersJson" type="textarea" :rows="5" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="输入格式">
        <el-input v-model="dataForm.tableInputFormat" type="textarea" :rows="5" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="输出格式">
        <el-input v-model="dataForm.tableOutputFormat" type="textarea" :rows="5" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="行格式">
        <el-input v-model="dataForm.tableRowFormatSerde" type="textarea" :rows="5" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="hdfs路径">
        <el-input v-model="dataForm.partitionColNameJson" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>

    <el-col :span="11">
      <el-form-item label="表创建时间">
        <el-input v-model="dataForm.tableCreateTime" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="表类型">
        <el-input v-model="dataForm.tableType" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="分桶列">
        <el-input v-model="dataForm.tableBucketColsJson" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="分桶个数">
        <el-input v-model="dataForm.tableBucketNum" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="排序列">
        <el-input v-model="dataForm.tableSortColsJson" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="数据量大小">
        <el-input v-model="dataForm.tableSize" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="最后修改时间">
        <el-input v-model="dataForm.tableLastModifyTime" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="最后修改路径">
        <el-input v-model="dataForm.tableLastModifyPath" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="最后修改路径大小" label-width="130px">
        <el-input v-model="dataForm.tableLastModifySize" style="width: 300px;"  :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="当前文件系统容量" label-width="130px">
        <el-input v-model="dataForm.fsCapcitySize" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="当前文件系统使用量" label-width="140px">
        <el-input v-model="dataForm.fsUsedSize" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="当前文件系统剩余量" label-width="140px">
        <el-input v-model="dataForm.fsRemainSize" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="13">
      <el-form-item label="技术负责人">
        <el-input v-model="dataForm.tecOwnerUserId" style="width: 300px" v-bind:disabled="disabledInput" ></el-input>
        <el-button type="primary" icon="el-icon-edit" @click="inputToDisabled" ></el-button>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="业务负责人">
        <el-input v-model="dataForm.busiOwnerUserId" style="width: 300px" :disabled="disabledInput1"></el-input>
        <el-button type="primary" icon="el-icon-edit" @click="inputToDisabled1" ></el-button>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="负责部门">
        <el-input v-model="dataForm.deptId" style="width: 300px" :disabled="disabledInput2"></el-input>
        <el-button type="primary" icon="el-icon-edit" @click="inputToDisabled2" ></el-button>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="生命周期(天)">
        <el-input v-model="dataForm.lifecycleDays" style="width: 300px" :disabled="disabledInput3"></el-input>
        <el-button type="primary" icon="el-icon-edit" @click="inputToDisabled3" ></el-button>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="安全级别">
        <el-input v-model="dataForm.securityLevel" style="width: 300px" :disabled="disabledInput4"></el-input>
        <el-button type="primary" icon="el-icon-edit" @click="inputToDisabled4" ></el-button>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="数仓所在层级">
        <el-input v-model="dataForm.dwLevel" style="width: 300px":disabled="disabledInput5" ></el-input>
        <el-button type="primary" icon="el-icon-edit" @click="inputToDisabled5" ></el-button>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="创建时间">
        <el-input v-model="dataForm.createTime" style="width: 300px" :disabled="true" ></el-input>
      </el-form-item>
    </el-col>
<!--    <el-col :span="11">-->
<!--      <el-button  type="primary" @click="add" style="margin-left: 500px">提交</el-button>-->
<!--    </el-col>-->
  </el-form>


</div>
</template>
<script>

import tableInfoApi from '@/api/assets/tableInfo'

export default {
  data() {
    return {
      dialogFormVisible: false,
      disabledInput:true,
      disabledInput1:true,
      disabledInput2:true,
      disabledInput3:true,
      disabledInput4:true,
      disabledInput5:true,
      dataForm: {
        //
        // name: '',
        // taskParams: '',
        // submitTime: '',
        // startTime: '',
        // endTime: '',
        // tableName: '',
        // failRetryTimes: 0,
        // failRetryInterval: 0,
        // timeoutFlag: 0,
        // timeoutNotifyStrategy: 0,
        // timeout: 0,
        tecOwnerUserId:1,
        busiOwnerUserId:1,
        deptId:1,
        lifecycleDays:0,
        securityLevel:"",
        dwLevel:""


      }
    }
  },
  methods: {
    // 加载banner列表数据
    init(tableName) {
      tableInfoApi.getTableInfoByName(tableName).then(response => {
        console.log("----"+this.tableName)
        this.dataForm = response
      })

    },
    inputToDisabled(){
      this.disabledInput=false;
    },
    inputToDisabled1(){
      this.disabledInput1=false;
    },
    inputToDisabled2(){
      this.disabledInput2=false;
    },
    inputToDisabled3(){
      this.disabledInput3=false;
    },
    inputToDisabled4(){
      this.disabledInput4=false;
    },
    inputToDisabled5(){
      this.disabledInput5=false;
    },
    // add(){
    //   console.log("----this.dataForm----"+this.dataFo
    //   rm.busiOwnerUserId)
    // }

  }

}

</script>
<!--<style rel="stylesheet/scss" lang="scss" scoped>-->
<!--.el-input.is-disabled /deep/ .el-input__inner {-->
<!--  color: #606266;-->
<!--}-->
<!--.el-textarea.is-disabled /deep/ .el-textarea__inner {-->
<!--  color: #606266;-->
<!--}-->
</style>


